<template>

	<view class="recommend">
		<view class="box">
			<view class="title">本周最热门新书：</view>
			<view class="list">
				<book v-for="(item,index) in list" :key="item.id" :item="item" :index='index' @click="gotoBook(item.book_id)">
				</book>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { BookItem } from '@/types/index'
	import { ref } from 'vue'
	interface Props {
		list : BookItem[]
	}

	defineProps<Props>()

	const emit = defineEmits(['gotoBook'])
	const pageName = ref<string>('书城首页')
	const gotoBook = (id : string | number ) => {
		if (!id) return
	
		emit('gotoBook', id)
	}
</script>

<style scoped lang="scss">
	.recommend {
		margin: 0 30rpx;
		padding: 20rpx 0;

		.box {
			background: #fff;
			border-radius: 16rpx;

			.title {
				padding: 40rpx 30rpx 0;
				@include tx(32rpx);
				font-weight: 600;
				color: #404040;
			}

			.list {
				padding: 20rpx 0;

				&:deep(.item) {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
				}
			}
		}
	}
</style>